<template>
    <div class="header">
        <header class="header_search">
            <van-icon name="arrow-left" @click="goBack" class="header_left"/>
            <input v-model="keyword" class="search_input"/>
            <span class="search_btn" @click="getList">搜索</span>
        </header>
        <van-tabs
        v-model:active="active"
        type="card"
        @click-tab="onClickTab"
        color="rgb(27,174,174)"
        class="tabs"
        >
            <van-tab
                v-for="tabItem in tabs"
                :title="tabItem.title"
                :name="tabItem.name"
                :key="tabItem.name"
            >
            </van-tab>
        </van-tabs>
    </div>
    <div class="content">
        <van-pull-refresh
            v-model="loading"
            @refresh="onRefresh"
            :head-height="80"
            duration="3000"
            success-text="刷新成功"
            class="fresh"
        >
            <!--释放提示-->
            <template #loosing>
                <img 
                    class="doge"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
                />
            </template>
            <!--加载提示-->
            <template #loading>
                <img 
                    class="doge"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
                />
            </template>
            <div class="good_list" v-if="list.length">
                <div
                    v-for="item in list"
                    :key="item.goodsId"
                    class="good"
                    @click="goToDetail(item)"
                >
                    <div class="list_good_pic">
                        <img :src="$filters.prefix(item.goodsCoverImg)" alt=""/>
                    </div>
                    <div class="list_good_info">
                        <div>{{ item.goodsName }}</div>
                        <div class="goodsIntro">{{ item.goodsIntro }}</div>
                        <div>￥{{ item.sellingPrice }}</div>
                    </div>
                </div>
            </div>
            <div v-else class="empty">
                <img 
                    src="https://s.yezgea02.com/1604041313083/kesrtd.png"
                    alt="暂无数据..."
                />
                <div>搜索想要的商品</div>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import HeaderTest from '@/components/HeaderTest.vue';
import  NavBar  from '@/components/NavBar.vue';
import { reactive,ref,toRefs } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { search } from "@/service/good";
export default {
    components: { HeaderTest,NavBar },
    setup() {
        const router = useRouter();
        const state = reactive({
            tabs: [
                {title:"推荐", name:""},
                {title:"新品", name:"new_products"},
                {title:"价格", name:"price"},
            ],
            list: [],
            loading: false,
            active: "",
            keyword: "",
        });

        const onchange = (e)=>{
            state.keyword = e.target.value;
        };
        const goBack = ()=> {
            router.go(-1);
        };
        const onClickTab = ({name})=>{
            if (!state.keyword) return;
            state.active = name;
            getList();
        };
        const getList = async() => {
            if(!state.keyword){
                state.list =[];
                return;
            }
            const {data} = await search({
                keyword: state.keyword,
                orderBy: state.active,
            });
            state.list=data.list;
        };
        const onRefresh = async(e)=>{
            state.loading = true;
            await getList();
            state.loading=false;
        };
        const goToDetail = (item)=> {
            router.push({path:`/product/${item.goodsId}`});
        };
        return {
            ...toRefs(state),
            getList,
            goBack,
            onchange,
            onClickTab,
            onRefresh,
            goToDetail,
        };
    },
};

</script>

<style lang="less" scoped>
@import "@/common/style/mixin.less";
.header {
    width: 100%;
    position: fixed;
    height: 5rem;
    top: 0;
    box-sizing: border-box;
    background: white;
    z-index: 999;
    padding: 0 1rem;
    .header_search {
        display: flex;
        height: @headerHeight;
        justify-content: space-between;
    }
    .header_left {
        line-height: @headerHeight;
    }
    .search_input {
        width: 75%;
        border: 1px solid #f7f7f7;
        height: 1.75rem;
        background: #f7f7f7;
        border-radius: 0.9rem;
        margin: 0.6rem 0;
    }
    .search_btn {
        width: 2.5rem;
        height: 1.75rem;
        margin: 0.8rem 0;
        color: white;
        background: @primary;
        border-radius: 0.2rem;
        line-height: 1.75rem;
    }
}
.tabs {
    /deep/ .van-tabs__nav--card {
        margin: 0 !important;
    }
}

.content {
    .fresh {
        /deep/ .van-pull-refresh__head {
            margin-top: -3rem auto 0;
        }
    }
}

.good_list {
    .good {
        height: 9.25rem;
        padding: 0.7rem 0;
        display: flex;
        .list_good_pic {
            width: 8rem;
            > img {
                width: 100%;
                height: 7.5rem;
            }
        }
        .list_good_info {
            flex: 1;
            text-align: left;
            .goodsIntro {
                margin: 0.7rem 0;
            }
        }
    }
    &:nth-child(n):not(:last-child){
        border-bottom: 1px solid #999;
    }
}
.empty {
        margin: 3rem auto;
        height: 100%;
        img {
            width: 9rem;
        }
    }
    .dogo {
        width: 140px;
        height: 72px;
        margin-top: 8px;
        border-radius: 4px;
    }
    .dogs {
        font-size: 24px;
    }
</style>